<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>切片解析</title>
    <script src="js/configData.js"></script>
    <script src="js/demo.js"></script>
    <link rel="stylesheet" href="css/demo.css">

    <style>
        #content {
            margin: 20px;
            /*position: relative;*/
            text-align: left;
        }

        .opt-panel {
            text-align: left;
        }

        .row {
            word-break: break-all;
        }

    </style>
</head>
<body id="body">
<div class="opt-panel">
    请输入切片信息(x-行，y-列，z-层级)【输入正确的行列号和层级才能解析出正确的坐标】<br>
    x:<input type="number" id="t_x" value="217066">y:<input type="number" id="t_y" value="112587">z:<input type="number"
                                                                                                           id="t_z"
                                                                                                           value="18"><br>
    是否加密<input id="useEncrypt" type="checkbox" onchange="switchEncrypt()"><br>
    <input type="file" id="pbfFile" onChange="onFileChange()"><br>
    <label>【注意：如果是通过file协议打开的页面请点击"选择文件"，加载指定的pbf文件即可预览】</label>
</div>
<div id="map"></div>
<div id="content">
</div>
</body>
</html>
<script>

</script>
<script>
    function switchEncrypt() {
        egisV2.MicroService.active = document.getElementById('useEncrypt').checked
    }

    var fr = new FileReader()

    function onFileChange(e) {
        let x = Number(document.getElementById('t_x').value)
        let y = Number(document.getElementById('t_y').value)
        let z = Number(document.getElementById('t_z').value)
        let file = document.getElementById('pbfFile').files[0]
        document.getElementById('content').innerHTML = ''
        fr.readAsArrayBuffer(file)
        fr.addEventListener('loadend', e => {
            var buf = e.target.result
            try {
                let tile = egisV2.util.PbfUtil.loadPbfFile(buf)

                var layerNames = Object.keys(tile.layers);
                console.log("图层名称", layerNames);
                document.getElementById('content').innerHTML += '<br><div class="row">图层名称:' + layerNames + '</div>'
                var devCounts = {}
                var totalDevs = 0
                if (layerNames.length > 0) {
                    layerNames.forEach(item => {
                        console.log("图层", item, '---------------------------------');
                        devCounts[item] = tile.layers[item]._features.length
                        //获取其中一个图层的一个要素的geoJson格式;
                        for (let featureIndex = 0; featureIndex < tile.layers[item]._features.length; featureIndex++) {
                            //通过行列号解析Feature数据
                            var orig = tile.layers[item].feature(featureIndex).toGeoJSON(x, y, z);
                            var geoJSON = JSON.stringify(orig)
                            document.getElementById('content').innerHTML += '<br><div class="row">' + geoJSON + '</div>'
                            console.log("geojson", geoJSON);
                        }
                        totalDevs += tile.layers[item]._features.length

                    })
                    console.log('图层与对应设备数量:' + JSON.stringify(devCounts))
                    document.getElementById('content').innerHTML += '<br><div class="row">图层与对应设备数量:' + JSON.stringify(devCounts) + '</div>'
                    console.log('设备总数:' + totalDevs)
                    document.getElementById('content').innerHTML += '<br><div class="row">设备总数:' + totalDevs + '</div>'
                }

            } catch (e) {
                alert('切片文件解析出错')
            }

        })
    }

    function initPage() {
        egisV2.MicroService.active = false
    }

    window.onload = () => {
        dynamicLoadJs(egisV2Url, () => {
            initPage()
        })
    }

</script>
